import React, { useState } from 'react'
import { View, Input, Radio, RadioGroup, Button, Textarea, Image,Text } from '@tarojs/components';
import PageWrapper from '@/components/PageWrapper'
import './index.scss';
const Page = () => {
  const [formData, setFormData] = useState({
    externalOrderId: '2290023843944107980',
    productAuthCode: 'C0A52143682',
    antiCounterfeitCode: '98LA2368',
    brand: '茅台',
    productName: '茅台龙年生肖',
    productSpecification: '500ML',
    alcoholContent: '53°',
    productionDate: '20230608',
    productionBatch: '2022006',
    photoCount: '8瓶',
    weight: '1022g',
    appraisalComment: '',
    appraisalResult: '通过'
  });

  const [photos, setPhotos] = useState<string[]>([]);

  const handleInputChange = (e: any, field: string) => {
    setFormData({
      ...formData,
      [field]: e.detail.value
    });
  };

  const handleRadioChange = (e: any) => {
    setFormData({
      ...formData,
      brand: e.detail.value
    });
  };

  const handleAppraisalResultChange = (result: string) => {
    setFormData({
      ...formData,
      appraisalResult: result
    });
  };

  const handlePhotoUpload = (index: number) => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        const newPhotos = [...photos];
        newPhotos[index] = tempFilePaths[0];
        setPhotos(newPhotos);
      }
    });
  };

  const handleSubmit = () => {
    Taro.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000
    });
    console.log('Form Data:', formData);
    console.log('Photos:', photos);
  };
  return (
    <PageWrapper title="内部鉴定工具" showBack={true} backgroundColor='#F0F0F0'>
      <View className="appraisal-page">
        <View className="section">
          <View className="section-title">基础信息</View>
          <View className="form-item">
            <Text className="label">外部单号：</Text>
            <Input
              className="input"
              value={formData.externalOrderId}
              onInput={(e) => handleInputChange(e, 'externalOrderId')}
            />
          </View>
          <View className="form-item">
            <Text className="label">货品鉴别号：</Text>
            <Input
              className="input"
              value={formData.productAuthCode}
              onInput={(e) => handleInputChange(e, 'productAuthCode')}
            />
          </View>
          <View className="form-item">
            <Text className="label">关联防伪码：</Text>
            <Input
              className="input"
              value={formData.antiCounterfeitCode}
              onInput={(e) => handleInputChange(e, 'antiCounterfeitCode')}
            />
          </View>
          <View className="form-item">
            <Text className="label">产品品牌：</Text>
            <RadioGroup onChange={handleRadioChange}>
              <Radio value="茅台" checked={formData.brand === '茅台'}>茅台</Radio>
              <Radio value="非茅台" checked={formData.brand === '非茅台'}>非茅台</Radio>
            </RadioGroup>
          </View>
          <View className="form-item">
            <Text className="label">产品名称：</Text>
            <Input
              className="input"
              value={formData.productName}
              onInput={(e) => handleInputChange(e, 'productName')}
            />
          </View>
          <View className="form-item">
            <Text className="label">产品规格：</Text>
            <Input
              className="input"
              value={formData.productSpecification}
              onInput={(e) => handleInputChange(e, 'productSpecification')}
            />
          </View>
          <View className="form-item">
            <Text className="label">酒精度数：</Text>
            <Input
              className="input"
              value={formData.alcoholContent}
              onInput={(e) => handleInputChange(e, 'alcoholContent')}
            />
          </View>
          <View className="form-item">
            <Text className="label">生产日期：</Text>
            <Input
              className="input"
              value={formData.productionDate}
              onInput={(e) => handleInputChange(e, 'productionDate')}
            />
          </View>
          <View className="form-item">
            <Text className="label">生产批次：</Text>
            <Input
              className="input"
              value={formData.productionBatch}
              onInput={(e) => handleInputChange(e, 'productionBatch')}
            />
          </View>
          <View className="form-item">
            <Text className="label">拍照瓶数：</Text>
            <Input
              className="input"
              value={formData.photoCount}
              onInput={(e) => handleInputChange(e, 'photoCount')}
            />
          </View>
          <View className="form-item">
            <Text className="label">备案重量：</Text>
            <Input
              className="input"
              value={formData.weight}
              onInput={(e) => handleInputChange(e, 'weight')}
            />
          </View>
        </View>

        <View className="section">
          <View className="section-title">照片信息</View>
          <View className="photo-grid">
            {[0, 1, 2, 3, 4, 5].map((index) => (
              <View key={index} className="photo-item" onClick={() => handlePhotoUpload(index)}>
                {photos[index] ? <Image src={photos[index]} className="photo" /> : <Text className="photo-placeholder">+</Text>}
              </View>
            ))}
          </View>

          <View className="section-title">鉴定评语</View>
          <Textarea
            className="textarea"
            value={formData.appraisalComment}
            onInput={(e) => handleInputChange(e, 'appraisalComment')}
          />
          <View className="section-title">鉴定结果</View>
          <View className="result-buttons">
            <Button
              className={`result-button ${formData.appraisalResult === '通过' ? 'active' : ''}`}
              onClick={() => handleAppraisalResultChange('通过')}
            >
              通过
            </Button>
            <Button
              className={`result-button ${formData.appraisalResult === '不通过' ? 'active' : ''}`}
              onClick={() => handleAppraisalResultChange('不通过')}
            >
              不通过
            </Button>
          </View>
        </View>

        <View className="submit-button">
          <Button className="submit" onClick={handleSubmit}>
            提交鉴定结果
          </Button>
        </View>
      </View>
    </PageWrapper>
  )
}

export default Page
